.inula-tabs {
  max-width: 100%;
  min-height: 150px;
  display: flex;
}

/* 选项卡bar布局 */
.inula-tabs-bar {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
  /* type=line */
  gap: 32px;
  transition: all 0.3s ease-in-out;
}

.inula-tabs-bar text {
  transition: all 0.3s ease-in-out;
}

/* 选项卡额外内容布局 */
.inula-tabs-bar-extra-content-left {
  height: 100%;
  display: flex;
  align-items: center;
}

.inula-tabs-bar-extra-content-left.inula-tabs-bar-pos-left,
.inula-tabs-bar-extra-content-left.inula-tabs-bar-pos-right {
  width: 100%;
  justify-content: center;
}

.inula-tabs-bar-extra-content-right {
  height: 100%;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
}

.inula-tabs-bar-extra-content-right.inula-tabs-bar-pos-left,
.inula-tabs-bar-extra-content-right.inula-tabs-bar-pos-right {
  width: 100%;
  align-items: flex-end;
  justify-content: center;
}

/* 选项卡相对bar位置布局 */
.inula-tabs-bar.inula-tabs-bar-left {
  justify-content: flex-start;
}

.inula-tabs-bar.inula-tabs-bar-center {
  justify-content: center;
}

.inula-tabs-bar.inula-tabs-bar-right {
  justify-content: flex-end;
}

/* 选项卡整体位置布局 */
.inula-tabs-bar.inula-tabs-bar-pos-top,
.inula-tabs-bar.inula-tabs-bar-pos-bottom {
  max-width: 100%;
  height: 48px;
  flex-direction: row;

  overflow-x: scroll;
  overflow-y: hidden;
  /* 隐藏滚动条 */
  scrollbar-width: none;
}

.inula-tabs-bar.inula-tabs-bar-pos-left,
.inula-tabs-bar.inula-tabs-bar-pos-right {
  max-height: 100%;
  min-width: 80px;
  flex-direction: column;

  overflow-x: hidden;
  overflow-y: scroll;
  /* 隐藏滚动条 */
  scrollbar-width: none;
}

.inula-tabs-bar.inula-tabs-bar-pos-top {
  border-bottom: 1px solid #f0f0f0;
}

.inula-tabs-bar.inula-tabs-bar-pos-bottom {
  border-top: 1px solid #f0f0f0;
}

.inula-tabs-bar.inula-tabs-bar-pos-left {
  border-right: 1px solid #f0f0f0;
}

.inula-tabs-bar.inula-tabs-bar-pos-right {
  border-left: 1px solid #f0f0f0;
}

.inula-tabs.inula-tabs-bar-pos-top {
  flex-direction: column;
  justify-content: flex-start;
}

.inula-tabs.inula-tabs-bar-pos-bottom {
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.inula-tabs.inula-tabs-bar-pos-left {
  flex-direction: row;
  justify-content: flex-start;
}

.inula-tabs.inula-tabs-bar-pos-right {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* 选项卡item */
.inula-tabs-bar-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 14px;
  color: rgba(0, 0, 0, 0.88);
}

.inula-tabs-bar-item-content {
  display: flex;
  align-items: center;
  gap: 7px;
}

.inula-tabs-bar-item.inula-tabs-bar-pos-top,
.inula-tabs-bar-item.inula-tabs-bar-pos-bottom {
  height: 100%;
}

.inula-tabs-bar-item.inula-tabs-bar-pos-left,
.inula-tabs-bar-item.inula-tabs-bar-pos-right {
  width: 100%;
  justify-content: center;
}

.inula-tabs-bar-item .inula-icon {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.88);
}

/* 选项卡item hover状态样式 */
.inula-tabs-bar-item-content:hover > .inula-icon,
.inula-tabs-bar-item-content:hover text {
  cursor: pointer;
  color: var(--inula-color-primary-hover);
  transition: color 0.1s ease-in-out;
}

/* 选项卡item disabled状态样式 */
.inula-tabs-bar-item.inula-tabs-bar-item-disabled .inula-icon,
.inula-tabs-bar-item.inula-tabs-bar-item-disabled text {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

/** ---type=line--- **/
/* 选项卡item active状态样式 */
.inula-tabs-bar-item-line.inula-tabs-bar-item.inula-tabs-bar-item-active
  .inula-icon,
.inula-tabs-bar-item-line.inula-tabs-bar-item.inula-tabs-bar-item-active text {
  color: var(--inula-color-primary);
}

.inula-tabs-bar-item-line.inula-tabs-bar-item.inula-tabs-bar-item-active {
  position: relative;
}

.inula-tabs-bar-item-line.inula-tabs-bar-item.inula-tabs-bar-item-active::after {
  content: "";
  position: absolute;
  background-color: var(--inula-color-text);
}

.inula-tabs-bar-item-line.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-top::after {
  bottom: 0;
  left: 0;
  width: var(--indicator-size);
  height: 2px;
}

.inula-tabs-bar-item-line.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-bottom::after {
  top: 0;
  left: 0;
  width: var(--indicator-size);
  height: 2px;
}

.inula-tabs-bar-item-line.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-left::after {
  top: 0;
  right: 0;
  height: var(--indicator-size);
  width: 2px;
}

.inula-tabs-bar-item-line.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-right::after {
  top: 0;
  left: 0;
  height: var(--indicator-size);
  width: 2px;
}

/**--- indicator ---**/
/**--- indicator ---**/
/* 水平方向对齐 */
.inula-tabs-bar-indicator-start.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-top::after,
.inula-tabs-bar-indicator-start.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-bottom::after {
  left: 0;
}

.inula-tabs-bar-indicator-center.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-top::after,
.inula-tabs-bar-indicator-center.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-bottom::after {
  left: 50%;
  transform: translateX(-50%);
}

.inula-tabs-bar-indicator-end.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-top::after,
.inula-tabs-bar-indicator-end.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-bottom::after {
  left: unset;
  right: 0;
}

/* 垂直方向对齐 */
.inula-tabs-bar-indicator-start.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-left::after,
.inula-tabs-bar-indicator-start.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-right::after {
  top: 0;
}

.inula-tabs-bar-indicator-center.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-left::after,
.inula-tabs-bar-indicator-center.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-right::after {
  top: 50%;
  transform: translateY(-50%);
}

.inula-tabs-bar-indicator-end.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-left::after,
.inula-tabs-bar-indicator-end.inula-tabs-bar-item-line.inula-tabs-bar-item-active.inula-tabs-bar-pos-right::after {
  bottom: 0;
}

/** ---type=card || editable-card--- **/
.inula-tabs-bar.inula-tabs-bar-card,
.inula-tabs-bar.inula-tabs-bar-editable-card {
  gap: 2px;
}

.inula-tabs-bar.inula-tabs-bar-card.inula-tabs-bar-pos-top,
.inula-tabs-bar.inula-tabs-bar-card.inula-tabs-bar-pos-bottom,
.inula-tabs-bar.inula-tabs-bar-editable-card.inula-tabs-bar-pos-top,
.inula-tabs-bar.inula-tabs-bar-editable-card.inula-tabs-bar-pos-bottom {
  height: 32px;
}

.inula-tabs-bar.inula-tabs-bar-card.inula-tabs-bar-pos-left,
.inula-tabs-bar.inula-tabs-bar-card.inula-tabs-bar-pos-right,
.inula-tabs-bar.inula-tabs-bar-editable-card.inula-tabs-bar-pos-left,
.inula-tabs-bar.inula-tabs-bar-editable-card.inula-tabs-bar-pos-right {
  min-width: 80px;
}

.inula-tabs-bar-item.inula-tabs-bar-item-card,
.inula-tabs-bar-item.inula-tabs-bar-item-editable-card {
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
}

.inula-tabs-bar-item.inula-tabs-bar-item-card.inula-tabs-bar-pos-top,
.inula-tabs-bar-item.inula-tabs-bar-item-editable-card.inula-tabs-bar-pos-top {
  border-radius: 8px 8px 0 0;
  padding: 0 16px;
}

.inula-tabs-bar-item.inula-tabs-bar-item-card.inula-tabs-bar-pos-bottom,
.inula-tabs-bar-item.inula-tabs-bar-item-editable-card.inula-tabs-bar-pos-bottom {
  border-radius: 0 0 8px 8px;
  padding: 0 16px;
}

.inula-tabs-bar-item.inula-tabs-bar-item-card.inula-tabs-bar-pos-left,
.inula-tabs-bar-item.inula-tabs-bar-item-editable-card.inula-tabs-bar-pos-left {
  border-radius: 8px 0 0 8px;
}

.inula-tabs-bar-item.inula-tabs-bar-item-card.inula-tabs-bar-pos-right,
.inula-tabs-bar-item.inula-tabs-bar-item-editable-card.inula-tabs-bar-pos-right {
  border-radius: 0 8px 8px 0;
}

/* 选项卡item active状态样式 */
.inula-tabs-bar-item-card.inula-tabs-bar-item.inula-tabs-bar-item-active,
.inula-tabs-bar-item-editable-card.inula-tabs-bar-item.inula-tabs-bar-item-active,
.inula-tabs-bar-item-card.inula-tabs-bar-item.inula-tabs-bar-item-active
  .inula-tabs-bar-item-content
  > .inula-icon,
.inula-tabs-bar-item-editable-card.inula-tabs-bar-item.inula-tabs-bar-item-active
  .inula-tabs-bar-item-content
  > .inula-icon {
  background-color: #fff;
  color: var(--inula-color-text);
}

.inula-tabs-bar-item-card.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-top,
.inula-tabs-bar-item-editable-card.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-top {
  border-bottom: 1px solid #fff;
}

.inula-tabs-bar-item-card.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-bottom,
.inula-tabs-bar-item-editable-card.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-bottom {
  border-top: 1px solid #fff;
}

.inula-tabs-bar-item-card.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-left,
.inula-tabs-bar-item-editable-card.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-left {
  border-right: 1px solid #fff;
}

.inula-tabs-bar-item-card.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-right,
.inula-tabs-bar-item-editable-card.inula-tabs-bar-item.inula-tabs-bar-item-active.inula-tabs-bar-pos-right {
  border-left: 1px solid #fff;
}

/** ---type=editable-card--- **/
.inula-tabs-bar-item-close:hover i {
  color: #000 !important;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.inula-tabs-bar-item.inula-tabs-bar-item-disabled
  .inula-tabs-bar-item-close:hover
  i {
  color: #8c8c8c !important;
  cursor: not-allowed;
}

.inula-tabs-bar-item-add {
  display: flex;
  align-items: center;
  border: 1px solid #f0f0f0;
  padding: 0 8px;
  height: 100%;
  border-radius: 8px 8px 0 0;
}

.inula-tabs-bar-item-add i {
  color: #000;
}

.inula-tabs-bar-item-add:hover i {
  color: var(--inula-color-primary-hover);
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}

/**--- size:small, default, large ---**/
.inula-tabs-bar-small {
  gap: 16px;
}

.inula-tabs-bar-small .inula-tabs-bar-item-content text {
  font-size: 14px;
}

.inula-tabs-bar-large {
  gap: 36px;
}

.inula-tabs-bar-large .inula-tabs-bar-item-content text {
  font-size: 18px;
}
